<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <div style="font-size: 3.5em; margin: 0 auto; margin-left: 30%; color: #DF7401;">Tienda Online</div>

        <div style="width: 100%; margin-left: 30%; margin-top: 180px;">

            <p:panel header="Iniciar Session" style="width: 400px">
                <h:form id="login">
                    <p:growl id="growl1" showDetail="true" life="2000" />
                    <h:panelGrid columns="2" border="0">
                        <p:outputLabel value="Email:" for="email"/>
                        <p:inputText id="email" value="#{clienteController.correo}" />
                        <p:outputLabel value="Contrasena:" for="contrasena"/>
                        <p:inputText id="contrasena" value="#{clienteController.contrasena}" />
                    </h:panelGrid>
                    <p:commandButton value="Entrar"  actionListener="#{clienteController.verificar()}"  update="growl1"/>
                    <p:commandButton value="Registrarse" onclick="PF('dlg2').show();" />
                </h:form>
            </p:panel>
        </div>



        <p:dialog header="Registro Usuario" widgetVar="dlg2" modal="true" height="300" width="400">

            <h:form id="formregistro">
                <p:growl id="growl" showDetail="true" />
                <h:panelGrid columns="3" border="0">
                    <p:outputLabel value="Nombre:" for="nombre"/>
                    <p:inputText id="nombre" value="#{clienteController.nombre}" required="true"/>
                    <p:message for="nombre"/>

                    <p:outputLabel value="Apellido:" for="apellido"/>
                    <p:inputText id="apellido" value="#{clienteController.apellido}" required="true"/>
                    <p:message for="apellido"/>

                    <p:outputLabel value="Correo:" for="correo"/>
                    <p:inputText id="correo" value="#{clienteController.correo}" required="true"/>
                    <p:message for="correo"/>

                    <p:outputLabel value="Contrasena:" for="pass"/>
                    <p:password id="pass" value="#{clienteController.contrasena}"/>
                    <p:message for="pass"/>

                    <p:outputLabel value="Telefono:" for="telefono"/>
                    <p:inputText id="telefono" value="#{clienteController.telefono}"/>
                    <p:message for="telefono"/>

                    <p:outputLabel value="Direccion:" for="dir"/>
                    <p:inputText id="dir" value="#{clienteController.direccion}"/>
                    <p:message for="dir"/>

                </h:panelGrid>
                <p:commandButton value="Guardar" actionListener="#{clienteController.registrar()}" update="growl" />
                <p:commandButton value="Cancelar" />
            </h:form>
        </p:dialog> 
    </h:body>
</html>

